<template>
	<view class="openApp">
		<view class="openApp-top">
			<image class="bg-img" src="../../static/images/openapp-bg.jpg"></image>			
		</view>
		<view class="openApp-tip">扫码免费下载App，开放更多功能</view>
		<view class="openApp-imgcode">
			<tki-qrcode
				cid="qrcode2"
				ref="qrcode2"
				:val="codeUrl"
				:size="size"
				:unit="unit"
				:background="background"
				:foreground="foreground"
				:pdground="pdground"
				:icon="icon"
				:iconSize="iconsize"
				:lv="lv"
				:onval="onval"
				:loadMake="loadMake"
				:usingComponents="true"
				@result="qrR" />
		</view>
		<view class="openApp-how">
			<view>Q：如何扫码下载App？</view>
			<view>A：可截屏保存二维码，在微信或浏览器中识别二维码即可</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				codeUrl: 'https://lease.litree.mixiot.top/download',// 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'rpx', // 单位
				background: '#eee', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
			};
		},
		onLoad(option) {
			this.creatQrcode()
		},
		methods:{
			/**
			 * 生成二维码
			 */
			creatQrcode() {
				this.$refs.qrcode2._makeCode()
			},
			/**
			 * @param {String} res
			*/
			qrR(res) {
				this.src = res
			},
		}
	}
</script>

<style lang="scss">
.openApp{
	&-top{
		height: 654rpx;
		width: 750rpx;
		box-sizing: border-box;
		.bg-img{
			width: 100%;
			height: 100%;
		}
	}
	&-tip{
		font-size: 28rpx;
		color:#40475E;
		text-align: center;
		margin-top: 60rpx;
	}
	&-imgcode{
		width: 200rpx;
		margin: 20rpx auto 0;
	}
	&-how{
		font-size: 24rpx;
		color: #7c7c7c;
		padding: 30rpx;
	}
}
</style>
